<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<!-- 预先解析 dns-prefetch -->
<!-- 引入css 方式一-->
<!-- <link rel="stylesheet" href="./css/index.css"> -->
<!-- 引入icon 图标 -->
<link rel="icon" href="./imgs/inzv.ico">
<style>
    /* 引入css 方式二 */
    @import url(./css/index.css);
    /* 选择器 */
    /* div{
        color: yellow;
        background-color: skyblue;
    } */
    .div-one{
        color: aqua;
    }

</style>
<body>
    <h2>CSS: 层叠样式表</h2>
    <!-- 内联样式  行内样式  style -->
    <div style="color:red;font-size: 20px">内联样式div</div>
    <div class="div-one">内联样式div</div>
    <!-- 常见的css属性: -->
    <div>
        常见的css属性: 
        <a href="" >font-size</a> 
        <a href="">color</a> 
        <a href="">background-color</a> 
        <a href="">width</a> 
        <a href="">height</a> 
    </div>
    <div>
        <h2>浏览器渲染的过程</h2>
        <p>浏览器先去加载index.html,解析html(从上往下),接着加载css,<span style="color:rgb(7, 134, 156)">&lt;如果是用的link引入的css 同步的, 不用等,走到body会停止,css加载完接着往下解析 &gt; </span></p>
        <p>解析css body部分,会解析成一个dom树 <img height="300" src="./imgs/20201011180106368.png" alt="" srcset=""></p>
    </div>
    <script>
        console.log(99);
        // 二进制
        // console.log(0b0011); 0b开头
        // 八进制
        // console.log(0o0011); 0o开头
        // 十六进制
        // console.log(0x0011); 0x开头
    </script>
</body>
</html>